<template>
  <div class="operation-list">
    <page-header
      v-bind="operationLogHeaderConfig"
      @searchClick="searchClick"
      @resetClick="resetClick"
    />
    <page-content
      ref="pageContentRef"
      v-bind="operationLogContentConfig"
      :single-btn-config="singleBtnConfig"
      @singleBtnClick="singleBtnClick"
    >
      <template #logMethod="row">
        <div class="log-method">
          <el-button
            size="small"
            plain
            text
            :type="logMethodColor(row[row.prop])"
            >{{ row[row.prop] }}
          </el-button>
        </div>
      </template>
      <template #logStatus="row">
        <el-button
          size="small"
          plain
          :type="row[row.prop] === 20000 ? 'success' : 'danger'"
          >{{ row[row.prop] === 20000 ? '成功' : '失败' }}
        </el-button>
      </template>
      <template #logDetail>
        <log-detail :row="curRow" />
      </template>
    </page-content>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

import PageHeader from '@/components/page-header/page-header.vue'
import operationLogHeaderConfig from '@/views/main/system/log/OperationList/config/header-config'
import PageContent from '@/components/page-content/page-content.vue'
import operationLogContentConfig from '@/views/main/system/log/OperationList/config/content-config'
import logDetailModalConfig from '@/views/main/system/log/OperationList/config/modal-log-detail'
import LogDetail from '@/components/log-detail/log-detail.vue'

import usePageHeader from '@/hooks/use-page-header'
import type { SingleBtnType } from '@/global/types'
import { SingleBtns } from '@/global/constant'

const logMethodColor = computed(() => {
  return (method: string) => {
    let color
    method === 'GET' && (color = 'warning')
    method === 'POST' && (color = 'success')
    method === 'PUT' && (color = 'info')
    method === 'DELETE' && (color = 'danger')
    return color
  }
})

const { pageContentRef, searchClick, resetClick } = usePageHeader()

const singleBtnConfig = ref({})
const curRow = ref({})
const singleBtnClick = (btnType: SingleBtnType, row: any) => {
  if (btnType === SingleBtns.Detail) {
    singleBtnConfig.value = logDetailModalConfig
    curRow.value = row
  }
  pageContentRef.value?.setModalStatus(true)
}
</script>

<style scoped lang="less">
.operation-list {
  .log-method {
    padding: 5px 0;
  }
}
</style>
